<template>
  <div class="app" ref="app">
    <div class="con" v-for="(item1,index) in list" :key="index" >
        <h4>{{item1.title}}</h4>
        <ul :class="item1.layout=='border'?'hot':'other'">
            <li v-for="(ite,index) in item1.lists" :key="index" :class="item1.layout=='border'?'border1':''" @click="saveCity(ite)">{{ite}}</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li v-for="(item1,index) in list" :key="index" @click="link(index)">{{item1.title}}</li>
        </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      list: []
    }
  },
  methods: {
    link (index) {
      // console.log(this.$refs.app.children[index].offsetTop)
      this.$refs.app.scrollTop = this.$refs.app.children[index].offsetTop
    },
    saveCity (val) {
      // console.log(val)
      localStorage.setItem('city', val)
      this.$router.push('/home')
    }
  },
  mounted () {
    axios.post('/citylist').then(res => {
      console.log(res.data)
      this.list = res.data
    })
  }
}
</script>

<style lang="less" scoped>
html,body .app{
    width: 100%;
    height: 100%;
}
.app{
  overflow: auto;
}
.other{
    width: 100%;
    padding: 10px;
    li{
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        padding-left: 10px;
    }
}
.right{
    position: fixed;
    top: 0;
    right: 0;
    background: rgb(231, 230, 230);
    width: 40px;
    height: 100%;
    ul{
        padding-top: 50px;
        li{
            text-align: center;
            margin: 2px 0;
        }
    }
}
.con{
    width: 100%;
}
h4{
    background: rgb(233, 231, 231);
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    color: rgba(156, 151, 151, 0.8);
    font-weight: 400;
}
.border1{
    border: 1px solid #ccc;
}
.hot{
    display: flex;
    flex-wrap: wrap;
    li{
        padding: 2px 15px;
        margin: 10px;
    }
}
</style>
